<template>
  <div class="container">
  <el-button type="primary" class="addAdmin" @click="addAdmin">增加管理员
</el-button>
  <el-table :data="tableData" stripe style="width: 100%">
  <el-table-column prop="openid" label="openid" width="280">
  </el-table-column>
  <el-table-column prop="username" label="用户名">
  </el-table-column>
  <el-table-column prop="password" label="密码">
  </el-table-column>
  <el-table-column prop="nickName" label="昵称">
  </el-table-column>
  <el-table-column prop="role" label="角色">
  </el-table-column>
  <el-table-column label="操作">
  <template slot-scope="scope">
  <el-button type="primary" @click="adminEdit(scope)">修改</el-button>
  <el-popconfirm style="margin-left:10px" title="这是一段内容确定删除吗？" @confirm="delAdmin(scope)">
  <el-button type="danger" slot="reference">删除</el-button>
  </el-popconfirm>
  </template>
  </el-table-column>
  </el-table>
  <el-pagination @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="pagesize" layout="prev, pager, next, jumper" :total="total">
  </el-pagination>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      pagesize: 15,
      total: 0,
    };
  },
  created() {
    this.getAdminList();
  },
  methods: {
    //分页
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.page = val;
      this.getAdminList();
    },
    //获取管理员
    getAdminList() {
      this.$http
        .get("/admGetAdmins", {
          params: {
            currentPage: this.currentPage,
            pagesize: this.pagesize,
          },
        })
        .then((res) => {
          //返回的数据在res.data中
          //console.log(res.data)
          if (res.data.status === "success") {
            this.total = res.data.total;
            this.tableData = res.data.result;
          } else {
            this.$message.error("服务器错误");
          }
        })
        .catch((err) => {
          console.log(err);
          this.$message.error("服务器错误");
        });
    },
    //修改
    adminEdit(scope) {
      //console.log(scope)
      const { row } = scope;
      this.$router.push({
        name: "AdminEdit",
        params: {
          action: "edit",
          info: row,
        },
      });
    },
    //删除
    delAdmin(scope) {
      const { _id } = scope.row;
      this.$http
        .get("/delAdmin", {
          params: {
            _id,
          },
        })
        .then((res) => {
          if (res.data === "success") {
            this.$message.success("删除成功");
          } else {
            this.$message.error("删除失败");
          }
        })
        .catch((error) => {
          this.$message.error("删除失败");
        });
      this.getAdminList();
    },
    //添加管理员
    addAdmin() {
      this.$router.push({
        name: "AdminEdit",
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.container {
  background-color: #fff;
  padding: 10px;
  .addAdmin {
    text-align: right;
    margin: 10px;
  }
}
</style>